<template>
    <div class="mx-auto max-w-4xl">
        <div class="rounded-3xl relative shadow overflow-hidden transform-gpu lg:translate-y-8" style="z-index: 100;">
            <form class="flex flex-row justify-between">
                <div class="flex-1 flex border-b bg-white border-fog">
                    <input type="text"
                        class="flex-1 px-3 pl-6 py-3 text-sm bg-transparent placeholder-cadet-blue md:text-lg" value=""
                        placeholder="Enter dietary needs &amp; food you want" @focus="onSearchFocus" />
                </div>
                <button type="submit"
                    class="bg-black hover:bg-gray-800 text-white flex justify-center items-center px-4 md:px-6 ">
                    <svg class="w-5 h-5" width="18px" height="18px" viewBox="0 0 18 18" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Group</title>
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Group" fill="currentColor" fill-rule="nonzero">
                                <path
                                    d="M17.56118,15.4476443 L14.079515,11.9640708 C15.1396312,10.3763433 15.5715929,8.45081032 15.2913013,6.56206259 C15.0110096,4.67330361 14.0387024,2.95637782 12.5632643,1.74523222 C11.087905,0.534092237 9.21501049,-0.0846608177 7.30891498,0.00933104001 C5.40281947,0.103322898 3.59981237,0.903339556 2.25061237,2.25376848 C0.901399996,3.60419178 0.102459007,5.40846845 0.00919253565,7.31564255 C-0.0840738912,9.2228054 0.535002733,11.0965128 1.74599749,12.5723209 C2.95699674,14.0480053 4.67333043,15.0203955 6.56115583,15.3000533 C8.44896998,15.5798237 10.3732906,15.1469503 11.9598447,14.0856904 L15.4413973,17.5684765 C15.7249494,17.8452095 16.105305,18 16.5012886,18 C16.8972722,18 17.2776279,17.8452095 17.56118,17.5684765 C17.8421462,17.2872438 18,16.9057797 18,16.5081166 C18,16.1103411 17.8421462,15.728877 17.56118,15.4476443 Z M7.69415014,2.25894316 C8.76892743,2.25894316 9.81957694,2.57782732 10.7132272,3.17526688 C11.6069223,3.77270643 12.3034352,4.62188302 12.7147095,5.61538824 C13.1259838,6.60890471 13.2335807,7.70213506 13.023896,8.75684777 C12.8142114,9.81154923 12.2966893,10.7803622 11.5366527,11.5407593 C10.7767172,12.3012126 9.80843498,12.8190182 8.75431134,13.0288179 C7.70017646,13.2386175 6.60754505,13.1309616 5.61457288,12.7193494 C4.62161196,12.3078496 3.7729006,11.610955 3.17578836,10.7168374 C2.57867612,9.8226973 2.25996666,8.77147187 2.25996666,7.69610543 C2.26155195,6.25456273 2.83458137,4.87252887 3.85334531,3.85320648 C4.87210925,2.8338841 6.25339719,2.26052931 7.69415014,2.25894316 Z"
                                    id="Shape"></path>
                            </g>
                        </g>
                    </svg>
                </button>
            </form>
        </div>
        <div class="relative" v-if="isOpenSearchPanel">
            <Shade @close="closeSearchPanel">
                <div class="absolute top-full mt-3 left-0">
                    <div class="shadow w-full p-3 lg:mt-8 rounded-2xl flex flex-wrap gap-3 bg-white">
                        <button v-for="(item) in searchList" :key="item.title"
                            class="border border-spindle text-ink rounded-lg font-bold p-3 text-sm flex flex-row items-center gap-3 leading-3 cursor-pointer select-none"
                            :class="item.isSelect ? 'bg-periwinkle-gray': 'bg-link-water'"
                            @click="() => selectSearchItem(item)">
                            {{item.title}}
                            <svg v-if="item.isSelect" class="w-3 h-3" width="16px" height="16px" viewBox="0 0 16 16"
                                version="1.1" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>Path Copy</title>
                                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path
                                        d="M15.6063703,2.29522225 C16.1312099,1.7703827 16.1312099,0.918469218 15.6063703,0.393629665 C15.0815308,-0.131209888 14.2296173,-0.131209888 13.7047778,0.393629665 L8,6.09840742 L2.29522225,0.393629665 C1.7703827,-0.131209888 0.918469218,-0.131209888 0.393629665,0.393629665 C-0.131209888,0.918469218 -0.131209888,1.7703827 0.393629665,2.29522225 L6.09840742,8 L0.393629665,13.7047778 C-0.131209888,14.2296173 -0.131209888,15.0815308 0.393629665,15.6063703 C0.918469218,16.1312099 1.7703827,16.1312099 2.29522225,15.6063703 L8,9.90159258 L13.7047778,15.6063703 C14.2296173,16.1312099 15.0815308,16.1312099 15.6063703,15.6063703 C16.1312099,15.0815308 16.1312099,14.2296173 15.6063703,13.7047778 L9.90159258,8 L15.6063703,2.29522225 Z"
                                        id="Path-Copy" fill="currentColor" fill-rule="nonzero"></path>
                                </g>
                            </svg>
                        </button>
                    </div>
                </div>
            </Shade>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import Shade from '../Shade/index.vue';
import { useSearch, Search } from './useSearch';
import { useStore } from 'vuex';
import { SET_SEARCH_LIST } from '@/store';
import cloneDeep from 'lodash/cloneDeep';
export default defineComponent({
    components: { Shade },
    setup() {
        const isOpenSearchPanel = ref(false);
        const defaultSearchList = useSearch();
        const store = useStore()
        const searchList = ref(defaultSearchList)


        watch(() => store.state.searchList, (list) => {
            searchList.value = defaultSearchList.map(item => {
                const data = list.find((obj: { title: string; }) => obj.title === item.title);
                return { ...item, isSelect: data ? data.isSelect : false };
            })
        }, {
            deep: true
        })

        // 打开搜索面板
        const onSearchFocus = () => {
            isOpenSearchPanel.value = true;
        };

        // 关闭搜索面板
        const closeSearchPanel = () => {
            isOpenSearchPanel.value = false;
        }

        // 选择tag
        const selectSearchItem = (item: Search) => {
            isOpenSearchPanel.value = true;
            searchList.value = searchList.value.map(obj => {
                if (obj.title === item.title) {
                    obj.isSelect = !obj.isSelect;
                }
                return obj;
            })
            const list = cloneDeep(searchList.value).filter(obj => obj.isSelect)
            store.commit(SET_SEARCH_LIST, list)
        }



        return { isOpenSearchPanel, searchList, onSearchFocus, closeSearchPanel, selectSearchItem }
    }
})
</script> 
